<template>
  <view class="container">
    <view class="card">
      <view class="login-title">Hello</view>
      <view class="form-item">
        <input class="input" type="text" placeholder="账号" v-model="account" />
      </view>
      <view class="form-item">
        <input class="input" type="password" placeholder="密码" v-model="password" />
      </view>
      <button class="btn" :disabled="loading" @tap="onSubmit">
        {{ loading ? '登录中...' : '登录' }}
      </button>
      <view class="msg err" v-if="errorMsg">{{ errorMsg }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { loginUser } from '@/api/chat/user'

const account = ref('')
const password = ref('')
const loading = ref(false)
const errorMsg = ref('')

function saveAuth(res: any) {
  // 兼容多种返回结构：{ data: { token, user } } 或 { token, user } 或 { data: { ...user, token } }
  const data = res?.data ?? res
  const token = data?.token
  const user = data?.user ?? data?.userInfo ?? data
  if (token) {
    uni.setStorageSync('token', token)
  }
  if (user) {
    uni.setStorageSync('user', user)
  }
}

async function onSubmit() {
  errorMsg.value = ''
  if (!account.value || !password.value) {
    uni.showToast({ title: '请输入账号和密码', icon: 'none' })
    return
  }
  loading.value = true
  try {
    // 后端参数为 account + passwordHash，此处直接传密码字符串，
    // 若后端要求哈希，请在此处对密码做 md5/sha256 后再作为 passwordHash 传递。
    const res = await loginUser({
      account: account.value,
      // 如需哈希：passwordHash: md5(password.value)
      passwordHash: password.value
    })
    saveAuth(res)
    uni.showToast({ title: '登录成功', icon: 'success' })
    // 登录成功后返回首页或跳转到指定页
    setTimeout(() => {
        uni.switchTab({ url: '/pages/view/ChatTab' })
    }, 500)
  } catch (e: any) {
    errorMsg.value = e?.message || '登录失败'
  } finally {
    loading.value = false
  }
}
</script>

<style>
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('@/static/logoBackground.jpg');
  background-size: cover;
  height: 100vh; /* 固定视口高度，禁止上下滚动 */
}
.card {
  width: 86%;
  padding: 32rpx;
  border-radius: 20rpx;
  background: #fff;
  box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.06);
}
.title {
  font-size: 36rpx;
  font-weight: 600;
  margin-bottom: 24rpx;
}
.login-title {
  text-align: center;
  font-size: 26px;
  margin-bottom: 25px;
  font-weight: bold;
  background: linear-gradient(90deg, #9b8cff, #4da3ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.form-item {
  margin: 18rpx 0;
}
.input {
  width: 100%;
  height: 88rpx; /* 统一高度 */
  padding: 0 24rpx;
  border: 1px solid #e5e6eb;
  border-radius: 12rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}
.btn {
  width: 100%;
  margin-top: 24rpx;
  height: 88rpx; /* 统一高度 */
  line-height: 88rpx; /* 文本垂直居中 */
  padding: 0 24rpx;
  border-radius: 12rpx;
  background-color: #007aff;
  color: #fff;
  font-size: 30rpx;
}
.msg.err {
  margin-top: 16rpx;
  color: #e74c3c;
  font-size: 26rpx;
}
</style>